<!-- src/views/AIChatAssistant.vue -->
<template>
  <div class="ai-chat-assistant">
    <ChatSidebar :conversations="conversationHistory" :current-conversation-id="currentConversation?.id"
      v-model:voice-enabled="voiceEnabled" @load-conversation="loadConversation" @new-conversation="newConversation" />
    <div class="chat-main">
      <div class="chat-header">
        <h3>{{ currentConversation?.title || '新对话' }}</h3>
        <div class="typing-indicator" v-if="isTyping">
          <span>小盟正在思考...</span>
        </div>
      </div>

      <div ref="messagesContainer" class="messages-container">
        <ChatMessage v-for="message in messages" :key="message.id" :message="message" @regenerate="sendMessage"
          @speak="handleSpeak" />
        <div v-if="messages.length === 0" class="empty-state">
          <div class="empty-icon">🤖</div>
          <h3>欢迎使用智能助手！</h3>
          <p>您可以问我任何问题，或者直接从侧边栏加载历史对话。</p>
        </div>
      </div>

      <ChatInput v-model="inputMessage" :is-sending="isTyping" :is-recording="isRecording" @send="sendMessage"
        @voice-input="handleVoiceInput" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useChat } from '../composables/useChat';
import { useSpeech } from '../composables/useSpeech';

import ChatSidebar from '../components/ChatSidebar.vue';
import ChatMessage from '../components/ChatMessage.vue';
import ChatInput from '../components/ChatInput.vue';

const {
  messages,
  inputMessage,
  isTyping,
  messagesContainer,
  conversationHistory,
  currentConversation,
  sendMessage,
  loadConversation,
  newConversation,
} = useChat();

const {
  isRecording,
  recognitionText,
  isSpeaking,
  startRecording,
  speakText,
  stopSpeaking,
} = useSpeech();

const voiceEnabled = ref(false);

const handleVoiceInput = () => {
  startRecording();
};

const handleSpeak = (text) => {
  if (voiceEnabled.value) {
    if (isSpeaking.value) {
      stopSpeaking();
    } else {
      speakText(text);
    }
  }
}

// When voice recognition provides a final result, update the input message
watch(recognitionText, (newText) => {
  if (newText) {
    inputMessage.value = newText;
  }
});

// Watch for new AI messages and speak them if enabled
watch(messages, (newMessages) => {
  const lastMessage = newMessages[newMessages.length - 1];
  if (voiceEnabled.value && lastMessage && lastMessage.sender === 'assistant' && !isTyping.value) {
    speakText(lastMessage.content);
  }
}, { deep: true });

</script>

<style scoped>
.ai-chat-assistant {
  display: flex;
  height: 90vh;
  /* Or adjust to fit your layout */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.chat-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.chat-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header h3 {
  margin: 0;
}

.typing-indicator {
  color: #999;
}

.messages-container {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.empty-icon {
  font-size: 3em;
  margin-bottom: 15px;
}
</style>